<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title th:text="${vote.voteName}">vote</title>
    <link rel="stylesheet" href="/static/style.css">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<!--导航栏开始-->
<div class="admin-header">
    <ul class="layui-nav">
        <li class="layui-nav-item admin-logo">
            <button id="refresh" class="layui-btn" style=" margin: 14px; background-color: #393D49;"><i
                    class="layui-icon layui-icon-refresh" style="float:left; color: #fff; font-size: 20px;"></i></button></li>
        <li class="layui-nav-item">
            <a href="javascript:;" th:text="${user.username}">张无忌123</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">修改密码</a></dd>
                <dd><a href="/user/logout">退出登录</a></dd>
            </dl>
        </li>
    </ul>
</div>
<!--导航栏结束-->
<main class="content">
    <div class="statistic-info">
        <ul class="layui-row">
            <li class="layui-col-xs4 radius">
                <a class="statistic-num" th:text="${userCount}" href="#">7</a>
                <a class="statistic-title" href="#">参与人数</a>
            </li>
            <li class="layui-col-xs4">
                <a class="statistic-num" th:text="${leftDays} + '天'" href="#">77天</a>
                <a class="statistic-title" href="#">剩余时间</a>
            </li>
            <li class="layui-col-xs4 radius">
                <a class="statistic-num" th:text="${userVotes}" href="#">777</a>
                <a class="statistic-title" href="#">累计票数</a>
            </li>
        </ul>
    </div>
    <div class="layui-card card-info">
        <div class="layui-card-header">注意事项</div>
        <div class="layui-card-body">
            <p><i class="layui-icon layui-icon-log"></i>&nbsp;开始时间：<span th:text="${#dates.format(vote.startTime, 'yyyy-MM-dd HH:mm')}">2019-04-09 8:00</span></p>
            <p><i class="layui-icon layui-icon-log"></i>&nbsp;结束时间：<span th:text="${#dates.format(vote.endTime, 'yyyy-MM-dd HH:mm')}">2019-04-13 8:00</span></p>
            <p><i class="layui-icon layui-icon-notice"></i>&nbsp;投票规则：每人最多投<span th:text="${vote.voteLimit}"></span>票，同一个候选人只能投<span th:text="${vote.voteForOne}"></span>票</p>
            <p><i class="layui-icon layui-icon-tips"></i>&nbsp;活动详情：<span th:text="${vote.details}">投票投票投票投票投票投票投票投票投票投票投票投票投票投票</span></p>
        </div>
    </div>
    <form action="/candidate/search" type="GET" class="layui-row search-id">
        <input name="username" type="text" class=" layui-col-xs9" placeholder="输入姓名 快速查询">
        <input name="vid" th:value="${vote.id}" type="text" hidden>
        <button id="search" class="layui-btn layui-col-xs2 layui-col-xs-offset1" type="submit">搜索</button>
    </form>
    <div class="vote-candidate">
        <ul>
            <input type="hidden" id="vid" th:value="${vote.id}">
            <th:block th:if="${candidates.isEmpty()}">
                <h1 style="text-align:center; margin: 0 auto;">暂无数据</h1>
            </th:block>
            <li th:each="c : ${candidates}">
                <input type="hidden" name="cid" th:value="${c.id}">
                <div class="card-header" name="pic">
                    <img th:src="'/pic/' + ${c.photoUrl}" src="/static/img/wjk.jpg" alt="">
                </div>
                <div class="card-body">
                    <span th:text="${c.user.username}">王俊凯</span>
                    <button class="layui-btn" name="voting-btn"><i class="layui-icon layui-icon-praise"></i>投票</button>
                </div>
            </li>
        </ul>
    </div>
</main>
<footer>
    <p>
        <span>地址：安徽省六安市裕安区月亮岛</span>
        <!--<span>当前IP地址：211.70.164.115</span>-->
        <!--<span>访问量：2420493</span>-->
    </p>
    <p>
        <span>皖西学院 Copyright 2019-2025 @ All Rights Reserved</span>
    </p>
    <p>
        <span>建议使用IE9.0或以上版本</span>
    </p>
</footer>
<script src="/static/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/lib/model'
    }).use(['jquery', 'layer', 'element'], function () {
        var $ = layui.$
            ,layer = layui.layer
            , element = layui.element;

        //刷新按钮
        $('#refresh').click(function () {
            window.location.reload();
        });

        //点击图片进入详情页
        $('div[name="pic"]').click(function () {
            const cid = $(this).prev().val();
            const vid = $('#vid').val();
            window.location.href = '/candidate/details?cid=' + cid + "&vid=" + vid;
        });


        //绑定投票按钮
        $('button[name="voting-btn"]').click(function () {

            //获取vid和cid
            var vid = $('#vid').val();
            var cid = $(this).parent().siblings()[0].value;
            //开始发送网络请求
            $.ajax({
                type: 'POST'
                ,url: '/user/vote'
                ,data: {vid: vid, cid: cid}
                ,success: function (res) {
                    if (res.status == 200){
                        layer.msg(res.msg)
                    }else{
                        layer.alert(res.msg, {
                            skin: 'layui-layer-red'
                            ,closeBtn: 0
                            ,anim: 4 //动画类型
                        });
                    }
                }
            })
        })
    })
</script>
</body>
</html>